<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Jquery Progress Bar!</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="jProgBar.js"></script>
<style type="text/css">
body{
	background-color:#E9E9E9;
	font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	color:#333;
	font-size:1.2em;
	text-shadow: 0 0 1px #FFF;
}
h3{
	margin:1em 0 .35em 0;
	border-bottom:1px solid #999;
}
#main{
	background-color:#FFF;
	border-radius:16px;
	border:5px solid #CCC;
	padding:20px;
	margin:55px;
}
#footer{
	background-color:#FFF;
	border-radius:7px;
	border:1px solid #CCC;
	padding:10px;
	margin:10px 0 0 0;
}
a, a:visited{
	text-decoration:none;
	color:#369;
	}
a:hover{
	text-decoration:none;
	}
.progbar {
	border-radius:4px;
	border:1px solid #AAA;
	background-color:#FFF;
	width: 100%;
	height: 23px;
	overflow:hidden;
	position:relative;
	color:#666;
}
.progbar .comp {
	background-color:#CCC;
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CCC), to(#BBB));
	position: relative;
	left: 0;
	width:0px;
	height:100%;
	overflow:hidden;
}
/* text on bar */
.progbar div.comp .text{
        position:absolute;
        text-align:center;
        color:#333;
}
/* text off bar */
.progbar div.text{
        position:absolute;
        width:100%;
        height:100%;
        text-align:center;
}
</style>
</head>
<body>
<div id="main">
<h1 align="center">jProgBar</h1>

<div class="progbar" id="prog1"><div class='text'>Loading</div><div class="comp"><div class='text'>Loading</div></div></div><br />



<spam id="intervalo2"></spam><div class="progbar" id="prog2"><div class="comp"></div></div><br />
<spam id="intervalo3"></spam><div class="progbar" id="prog3"><div class="comp"></div></div><br />
<button id="a"> a </button>&nbsp;<button id="b"> b </button>
<button id="run"> start </button>&nbsp;<button id="reset"> reset </button>
<div id="footer">&copy;2010 David Gonzalez Garcia - <a href="http://davidxl.blogspot.com">davidxl.blogspot.com/</a></div>
</div>
<script>
$('#prog1 .comp .text').width($('#prog1').width());
$('#prog1').progress(25);
$('#prog2').progress(50);
$('#prog3').progress(75);

$('#a').click(function () {
	$('#prog2').progress($('#prog2').progress()+5);
})
$('#b').click(function () {
	$('.progbar').progress(50);
})
//---------
var pct=0;
var handle=0;
function update(){
		$('#prog3').progress(++pct);
        if(pct==100){
                clearInterval(handle);
                $("#run").val("start");
                pct=0;
        }
}

$("#run").click(function(){
		if(this.value=="start"){
				handle=setInterval("update()",100);
				this.value="stop";
		}else{
				clearInterval(handle);
				this.value="start";
		}
});
$("#reset").click(function(){
		pct=0;
		$('#prog3').progress(0);
});
</script>
</body>
</html>
